<script setup lang="ts">
import { ApiListItem } from '@/api/api-manage/list'
import { getDisplayAlgorithms } from '@/utils/algorithms'

const props = defineProps<{
  data: ApiListItem
}>()

const algorithms = computed(() => getDisplayAlgorithms(props.data.algorithmBasic))
</script>

<template>
  <div
    :class="`
    shadow flex flex-col items-center justify-center gap-2 relative py-12 cursor-pointer
    will-change-transform transition-transform
    hover:-translate-y-2
    `"
    @click="$router.push({ path: '/trial', query: { id: data.id } })"
  >
    <div class="h-[96px] bg-neutral-200 aspect-square rounded-lg overflow-hidden">
      <el-image fit="cover" class="h-full w-full" :src="data.apiIconPth" alt="" />
    </div>
    <p class="text-lg font-bold">{{ data.apiName }}</p>
    <p class="text-neutral-500">{{ data.apiDesc }}</p>
    <div class="flex items-center gap-1">
      <el-tag v-for="a in algorithms" :key="a" type="primary">{{ a }}</el-tag>
      <el-tag type="warning">{{ data.version }}</el-tag>
    </div>
    <div class="absolute right-2 bottom-2">
      <p class="text-neutral-400 text-sm">调用：{{ data.callFreq }} 次</p>
    </div>
  </div>
</template>
